import { App } from 'vue'
import { createStore } from 'vuex'
import { SET_USER_MENU } from './contant';

const store = createStore<IState>({
  state: {
    // 把用户登录后的权限菜单数组存在这里
    userMenus: [],
    username: ''
  },
  mutations: {
    [SET_USER_MENU](state, pyload: IMenuModel[]) {
      state.userMenus = pyload
    },
    setUserName(state, username: string) {
      state.username = username;
    }
  },
  getters: {
    computedMenus(state) {
      const menus: IMenuModel[] = [];
      // 把 userManues 变成 父子结构
      // 观察数据结构得到 ： 二级菜单的 parentId === 一级菜单的id
      // 所有的一级菜单，parentId === 0
      // 思路1： 先把所有的一级菜单拿出来，组成一个数组
      //        再根据所有的二级菜单的 parentId 加入 一级菜单的 children数组里面

      // 思路二：
      // 遍历所有menus，直接把parentid为0的作为一级菜单，同时如果parentid不为0的直接找到父menu，作为它的子菜单
      // 为了保证所有的父menu一定在子menu之前，根据id先做一次排序
      state.userMenus.sort((prev, next) => prev.id - next.id)
        // 再遍历
        .forEach(menu => {
          // 判断 parentId 是否为0
          if (menu.parentId === 0) {
            // 此时这个menu就是一级
            menus.push(menu)
            menu.children = []; // 作为一个一级菜单，它有children
          } else {
            // 找到我们一级菜单，作为一级菜单的子菜单
            // 找到我的parentId 和 menus里面的某个的id相同的
            menus.find(m => m.id === menu.parentId && menu.hidden === 0)?.children?.push(menu)
          }
        })

      return menus;
    },
    // 把所有的用户的权限对应的 name ，提取出来，用于按钮级的权限控制
    globalPermissions(state) {
      return state.userMenus.map(item => item.name);
      // 下面是用来测试指令效果的代码
      // const temp = state.userMenus.map(item => item.name);
      // temp.splice(temp.indexOf('allocRole'), 1)
      // return temp;
    }
  }
})

const regStore = (app: App<Element>) => {
  app.use(store)
}

export { regStore }
// 导出store让不是组件的地方可以直接使用
export default store
